<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
     <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/easyui/themes/icon.css">
    <script type="text/javascript" src="${pageContext.request.contextPath}/easyui/jquery.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript"  src="${pageContext.request.contextPath}/easyui/easyui-lang-zh_CN.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/common.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>员工信息管理页面</title>
<script type="text/javascript">
    var url;
	//通过客户姓名搜索客户
	function searchStaff(){
		$("#dg").datagrid('load',{
			
			"userName":$("#s_userName").val(),
			"roleName":$("#s_roleName").val()
			
		});
	}
	//刷新
	function refresh() {
		$("#dg").datagrid("load", {//使用load方法
			data : "productName"//传到后台的变量
		});
	}
	<!--添加新客户-->
	function openStaffAddDialog(){
		$("#dlg").dialog("open").dialog("setTitle","添加新员工");
		url="${pageContext.request.contextPath}/addstaff.do";
	}
	function addStaff(){
		$("#fm").form("submit",{
			url:url,
			onSubmit:function(){
				var mobile=/^1[3|4|5|8][0-9]\d{8}$/;
				var b8=document.getElementById("number");
				var bb8=b8.value;
				var b1=document.getElementById("id");
				var bb1=b1.value;
				if(bb1==null||bb1=='')
				{
				$.messager.alert("系统提示","员工编号不能为空!!!");
				return false;
				}
				
				if(!mobile.test(bb8))
					{
					$.messager.alert("系统提示","手机格式有误");
					return false;
					}

				return $(this).form("validate");
			},
			success:function(result){
				var result=eval('('+result+')');
				if(result.success){
					$.messager.alert("系统提示","保存成功");
					resetValue();
					$("#dlg").dialog("close");
					$("#dg").datagrid("reload");
				}else{
					$.messager.alert("系统提示","保存失败");
					return;
				}
			}
		});
	}
	<!--编辑并修改员工信息-->
	function openStaffEditorDialog(){
		var selectedRows=$("#dg").datagrid('getSelections');
		if(selectedRows.length!=1){
			$.messager.alert("系统提示","请选择一条要编辑的数据！");
			return;
		}
		var row=selectedRows[0];
		$("#dlg").dialog("open").dialog("setTitle","编辑员工信息");
		$('#fm').form('load',row);
		//其中id1不能够与属性id名字一致
		url="${pageContext.request.contextPath}/updatestaff.do?id1="+row.id;
	}
	
	<!--删除员工-->
	function deleteStaff(){
		var selectedRows=$("#dg").datagrid('getSelections');
		if(selectedRows.length==0){
			$.messager.alert("系统提示","请选择要删除的数据！");
			return;
		}
		var strIds=[];
		for(var i=0;i<selectedRows.length;i++){
			
			strIds.push(selectedRows[i].id);
		}
		var ids=strIds.join(",");
		$.messager.confirm("系统提示","您确认要删除这<font color=red>"+selectedRows.length+"</font>条数据吗？",function(r){
			if(r){
				$.post("${pageContext.request.contextPath}/deletestaff.do",{ids:ids},function(result){
					if(result.success){
						$.messager.alert("系统提示","数据已成功删除！");
						$("#dg").datagrid("reload");
					}else{
						$.messager.alert("系统提示","数据删除失败！");
					}
				},"json");
			}
		});
		
	}
	
	//重置
	function reset(){
		$("#s_userName").val("");
		$("#s_roleName").combobox("setValue","");
		
		

	}
	
	function resetValue(){
		$("#id").val("");
		$("#name").val("");
		$("#number").val("");
		$("#address").val("");
		$("#remark").val("");
		
	}
	
	function closeStaffDialog(){
		$("#dlg").dialog("close");
		resetValue();
	}
</script>
</head>
<body style="margin:1px;">
          <!-- 查询所有员工 -->
	<table id="dg" title="员工信息管理" class="easyui-datagrid"
	  pagination="true" rownumbers="true"  fit="true"
	    url="${pageContext.request.contextPath}/stafflist.do"  toolbar="#tb">
		 <thead data-options="frozen:true">
				<tr>
					<th field="cb" checkbox="true" align="center"></th>
			 		<th field="id" width="200" align="center">员工编号</th>
			 		<th field="userName" width="200" align="center">员工姓名</th>
			 		<th field="telephone" width="200" align="center">员工电话</th>
			 		<th field="address" width="200" align="center">员工地址</th>
			 	
			 		<th field="remark" width="200" align="center">备注</th>
			 		<th field="roleName" width="200" align="center">角色</th>
			 		
				</tr>
			</thead>
	</table>
		
	<div id="tb">
		<div>
			<a href="javascript:openStaffAddDialog()" class="easyui-linkbutton" iconCls="icon-add" plain="true">添加新员工</a>
			<a href="javascript:openStaffEditorDialog()" class="easyui-linkbutton" iconCls="icon-edit" plain="true">修改员工信息</a>
			<a href="javascript:deleteStaff()" class="easyui-linkbutton" iconCls="icon-remove" plain="true">删除员工</a>
				<div>
			&nbsp;员工姓名：&nbsp;<input type="text" id="s_userName" size="20" onkeydown="if(event.keyCode==13) searchStaff()"/>
			<select class="easyui-combobox" id="s_roleName" name="roleName" style="width: 154px;" editable="false" panelHeight="auto" onkeydown="if(event.keyCode==13) searchStaff()">
	 						<option value="">请选择员工类型...</option>
	 						<option value="普通管理员">普通管理员</option>
	 						<option value="超级管理员">超级管理员</option>
	 						</select>
          <a href="javascript:searchStaff()" class="easyui-linkbutton" iconCls="icon-search" plain="true">搜索</a>
			<a href="javascript:reset()" class="easyui-linkbutton" iconCls="icon-redo" plain="true">重置</a>
			<a id="refreshbtn"
				href="javascript:refresh()" class="easyui-linkbutton"
				iconCls="icon-reload" plain="true">刷新</a>	
		</div>
		</div>
	</div>
	
	<!-- 添加新员工 -->
	<div id="dlg" class="easyui-dialog" style="width: 400px;height:400px;padding: 10px 20px"
	  closed="true" buttons="#dlg-buttons">
	 	<form id="fm" method="post">
	 		<table cellspacing="8px">
	 		<tr>
	 				<td>员工编号：</td>
	 				<td><input type="text" id="id" name="id" class="easyui-validatebox" required="true"/>&nbsp;<font color="red">*</font></td>
	 			</tr>
	 			
	 			<tr>
	 				<td>员工姓名：</td>
	 				<td>
	 					<input type="text" id="name" name="userName" class="easyui-validatebox" />&nbsp;<font color="red">*</font>
	 				</td>
	 				</tr>
	 				<tr>
	 				<td>手机号码：</td>
	 				<td>
	 					<input type="text" id="number" name="telephone" class="easyui-validatebox" />&nbsp;<font color="red">*</font>
	 				</td>
	 			</tr>
	 				<tr>
	 				<td>地址：</td>
	 				<td>
	 					<input type="text" id="address" name="address" class="easyui-validatebox" />&nbsp;<font color="red">*</font>
	 				</td>
	 				</tr>
	 				<tr>
	 				<td>备注：</td>
	 				<td>
	 					<input type="text" id="remark" name="remark" class="easyui-textbox" data-options="multiline:true" style="width: 160px; height: 100px;" />&nbsp;<font color="red">*</font>
	 				</td>
	 				</tr>
	 			<tr>
	 			
	 				<td>角色：</td>
	 				<td>
	 					<input type="text" id="roleName" name="roleName" class="easyui-validatebox" value="普通管理员":/>&nbsp;<font color="red">*</font>
	 				</td>
	 				</tr>
	 		</table>
	 			
	 	</form>
	</div>
	<div id="dlg-buttons">
		<a href="javascript:addStaff()" class="easyui-linkbutton" iconCls="icon-ok">保存</a>
		<a href="javascript:closeStaffDialog()" class="easyui-linkbutton" iconCls="icon-cancel">关闭</a>
	</div>
	

</body>
</html>